<template>
	<view class="page bg-fff">
		<view class="searchFilterWrap bg-fff">
			<view class="searchInputWrap border-grey">
				<up-search v-model="keyword" :focus="searchFocus" placeholder="搜索楼盘/区域/板块" height="40" shape="round" :showAction="false" bgColor="#FFFFFF" @change="clickSearch" @search="clickSearch"></up-search>
			</view>
			<filter-menu ref="filterMenuRef" :maskTop="40" :menuList="menuList" :defaultValues="defaultValues"
				@change="handleFilterChange" @filterOpen="handleFilterOpen"
				@filterClose="handleFilterClose"></filter-menu>
		</view>
		<view class="productListWrap" v-if="productList.length > 0">
			<view class="productItemWrap" v-for="item in productList" :key="item.id">
				<product-item :product="item"></product-item>
			</view>
			<up-loadmore :status="loadStatus" />
			<up-gap height="40" />
		</view>
		<up-empty mode="search" v-if="productList.length === 0 && loadStatus === 'nomore'"></up-empty>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { useIndexStore } from '@/store/index';
import { loadAllProducts } from '@/common/api/houses';

const indexStore = useIndexStore();

let keyword = ref('');
const menuList = ref([]);

// 设置默认值
const defaultValues = ref([]);

// 筛选菜单ref
const filterMenuRef = ref(null);

// 搜索框聚焦
const searchFocus = ref(false);

// 产品列表
let next = ref('');
let loadStatus = ref('loadmore');
let productList = ref([]);
let loadParams = ref({
	area: '',
	street: '',
	subway: '',
	station: '',
	amount: '',
	house: '',
	size: '',
	more: '',
	city: indexStore.nowCityCode,
	keyword: '',
	tag: ''
});

// 初始化加载数据
onLoad((options) => {
	uni.$check_and_login(init)
});

// 监听页面滚动到底部
onReachBottom(() => {
	if (loadStatus.value === 'loadmore') {
		getList();
	}
});

// 初始化数据
async function init() {
	//获取城市筛选菜单数据
	await indexStore.getCityFilterMenuParams();
	let catchFilterData = [];
	catchFilterData = [
		{
			title: '区域',
			type: 'tree',
			data: [
				{
					id: 'area',
					name: '区域',
					children: indexStore.filterAreaList
				},
				{
					id: 'metro',
					name: '地铁',
					children: indexStore.filterMetroList
				}
			]
		},
		{
			title: '价格',
			type: 'checkbox',
			data: indexStore.filterAmountList
		},
		{
			title: '户型',
			type: 'checkbox',
			data: indexStore.filterHouseList
		},
		{
			title: '面积',
			type: 'checkbox',
			data: indexStore.filterSizeList
		},
		{
			title: '更多',
			type: 'radio',
			data: indexStore.filterTagList
		}
	];
	menuList.value = catchFilterData;
	defaultValues.value = [
		{ level1: 'area', level2: '', items: [] },
		[''],
		[''],
		[''],
		'',
	];
	await getList(true);
	searchFocus.value = true;
}

// 获取数据方法
async function getList(isRefresh = false) {
	if(isRefresh) {
		loadStatus.value = 'loadmore';
		next.value = '';
	}
	if (loadStatus.value === 'loading' || loadStatus.value === 'nomore') return;
	
	try {
		loadStatus.value = 'loading';
		let url = (next.value ? next.value : '/product/mall/v6/query');
		const res = await loadAllProducts(url, loadParams.value);
		if(res.status !== 0) {
			uni.$u.toast(res.detail);
			return
		}
		if(isRefresh) {
			productList.value = res.detail.results;
		}else{
			productList.value.push(...res.detail.results);
		}
		next.value = res.detail.next;
		loadStatus.value = res.detail.next ? 'loadmore' : 'nomore';	
	} catch (error) {}
}

// 处理筛选菜单打开的逻辑
const handleFilterOpen = () => {
//   isFilterOpen.value = true;
}

// 处理筛选菜单关闭的逻辑
const handleFilterClose = () => {
//   isFilterOpen.value = false;

}

//筛选菜单事件
async function handleFilterChange(data) {
	let [treeArr, priceArr, typeArr, sizeArr, moreStr ] = data.allValues;

	loadParams.value = {
		...loadParams.value,
		area: treeArr.level1 === 'area'?treeArr.level2 : '',
		street: treeArr.level1 === 'area'?treeArr.items.join(',') : '',
		subway: treeArr.level1 === 'metro'?treeArr.level2 : '',
		station: treeArr.level1 === 'metro'?treeArr.items.join(',') : '',
		amount: priceArr.join('|'),
		house: typeArr.join(','),
		size: sizeArr.join('|'),
		more: moreStr,
		city: indexStore.nowCityCode,
		keyword: keyword.value,
		tag: ''
	}
	await getList(true);
}

//改变输入框搜索
async function clickSearch() {
	// 关闭筛选菜单
	if (filterMenuRef.value) {
		filterMenuRef.value.closeMenu(); // 调用新暴露的关闭方法
	}
	loadParams.value.keyword = keyword.value;
	await getList(true);
}
</script>

<style lang="scss" scoped>
.page {
	border-top: 1px solid #FFFFFF;
	position: relative;
	min-height: 100vh;

	.searchFilterWrap {
		padding-top: 30rpx;
		position: sticky;
		top: 0;
		z-index: 100;
		.searchInputWrap{
			margin: 0 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}
	}
	
	.productListWrap {
		.productItemWrap {
			margin: 20rpx;
		}
	}
}
</style>
